<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="UTF-8">

  <meta name="description" content="">
  <meta name="keywords" content="">

  <title>你喜欢</title>

  <link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
  <link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">

  <script src="/js/jquery-1.7.2.min.js" ></script>
  <script src="/js/html5.js" ></script>
  <script src="/js/jflow.plus.js" ></script>
  <script src="/js/jquery.carouFredSel-5.2.2-packed.js"></script>
  <script src="/js/checkbox.js"></script>
  <script src="/js/radio.js"></script>
  <script src="/js/selectBox.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/element.js"></script>

  <script>
	$(document).ready(function(){
        function collection(){
            window.location.href = "/collect/getCollect?userId="+sessionStorage.getItem("userId");
        }
	      $("#myController").jFlow({
			controller: ".control", // must be class, use . sign
			slideWrapper : "#jFlowSlider", // must be id, use # sign
			slides: "#slider",  // the div where all your sliding divs are nested in
			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			width: "984px",  // this is the width for the content-slider
			height: "480px",  // this is the height for the content-slider
			duration: 400,  // time in miliseconds to transition one slide
			prev: ".slidprev", // must be class, use . sign
			next: ".slidnext", // must be class, use . sign
			auto: true
	      });
       });
  </script>
  <script>
	$(function() {
	  $('#list_product').carouFredSel({
		prev: '#prev_c1',
		next: '#next_c1',
		auto: false
	  });
          $('#list_product2').carouFredSel({
		prev: '#prev_c2',
		next: '#next_c2',
		auto: false
	  });
	  $(window).resize();
	});
  </script>
  <script>
       $(document).ready(function(){
	      $("button").click(function(){
		     $(this).addClass('click')
	      });
       })
  </script>
  <script>
       $(document).ready(function() {
	$("select").selectBox();
       });
  </script>
    <script type="text/javascript">
        $(function () {
            var search = $(".entry_form").val()== undefined ? '': $(".entry_form").attr("value").trim();
            //搜索框事件
            $(".search").keypress(function (even) {
                if (even.which == 13) {
                    search =$(this).val();
                    requestGoodsByCondition();
                }
            });

            // 通过条件获取商品信息
            function requestGoodsByCondition() {
                $("#grid_12a table.compare").remove();//清除数据
                //封装方法
                var conditionData = {
                    "search":search//搜索

                };
                var conditionDataJSON = JSON.stringify(conditionData);
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: '/goods/note_list',
                    data: conditionDataJSON,
                    contentType: "application/json",
                    cache: false,
                    async: true,
                    success: function (data) {
                    console.log(data);
                        /**
                         *
                         * 所有分页带条件的数据在data里面
                         */
                        r=data.prolike;
                        var html ='<table class="compare">';
                        for (var i = 0; i <= r.length/2;i++) {
                            var s="无货";
                            var s1="无货";
                            var s2="无货";
                            if (r[i].goodsNumber>0) var s="有货";
                            if (r[i+1].goodsNumber>0) var s1="有货";
                            if (r[i+2].goodsNumber>0) var s2="有货";
                            html+='<tr class="close_top"><td class="desc"></td> <td><a title="close" class="close" href="javaScript:void(0);"></a></td>'+
                                '<td><a title="close" class="close" href="javaScript:void(0);"></a></td> <td><a title="close" class="close" href="javaScript:void(0);"></a></td></tr>'+
                                '<tr class="images"><td class="desc">照片</td><td class="bg"><a href="javaScript:void(0);" class="getByGoodsId" alt="'+r[i].gid+'"><div><img src="'+
                               r[i].gimage+'" alt="Product slide 1"></div></a></td><td><a href="javaScript:void(0);" class="getByGoodsId" alt="'+r[i+1].gid+'"><div><img src="'+
                                r[i+1].gimage+'" alt="Product 6"></div></a></td><td class="bg"><a href="javaScript:void(0);" class="getByGoodsId" alt="'+r[i+2].gid+'"><div><img src="'+
                                r[i+2].gimage+'" alt="Product 2"></div></a></td></tr><tr class="prise"><td class="desc">价格</td><td class="bg">￥'+
                                r[i].price+'</td><td>￥'+r[i+1].price+'</td><td class="bg">￥'+r[i+2].price+'</td></tr><tr class="model"><td class="desc">类型</td><td class="bg">' +
                                r[i].item+'</td> <td>'+ r[i+1].item+'</td><td class="bg">'+ r[i+2].item+'</td></tr> <tr class="availbility"><td class="desc">库存</td><td class="bg">' +
                               s+'</br>'+r[i].goodsNumber+'</td><td>'+s1+'</br>'+r[i+1].goodsNumber+'</td><td class="bg">'+s2+'</br>'+r[i+2].goodsNumber+'</td></tr><tr class="description"><td class="desc">详情</td><td class="bg"><p>' +
                                r[i].gname+'</p><p></p></td><td><p>'+r[i+1].gname+'</p><p></p></td><td><p>'+r[i+2].gname+'</p><p></p></td></tr> <tr class="add_cart"> <td class="desc"></td>' +
                                '<td class="bg"><button class="add" alt="'+r[i].gid+'">加入购物车</button></td><td><button class="add"  alt="'+r[i+1].gid+'">加入购物车</button></td><td class="bg"><button class="add"  alt="'+r[i+2].gid+'">加入购物车</button></td></tr>' +
                                '<tr class="close_botttom"><td class="desc"></td><td><a title="close" class="close" href="javaScript:void(0);"></a></td><td><a title="close" class="close" href="javaScript:void(0);"></a></td>' +
                                '<td><a title="close" class="close" href="javaScript:void(0);"></a></td></tr>';
                            i=i+2;

                        }
                        html+='</table>'
                        $("#grid_12a").append(html);
                    /* 商品详情*/
                        $(".getByGoodsId").click(function () {
                            var  gid =$(this).attr("alt");
                            window.location.href="/goods/getByIdGoods?id="+gid;
                        });

                        /***
                         * 加入购物车
                         */
                        $(".add").click(function () {
                            var  gid =$(this).attr("alt");
                            var json={"gid":gid};
                            $.post("/shoppingcart/addShopping",json,function(r){
                                if(r=="ok"){
                                    alert("成功加入购物车！！！！！");
                                }else if (r=="err") {
                                    var flag =confirm('请登陆！！！！！！！');
                                    if (flag) {
                                        window.location.href="/qd/login.html";
                                    }
                                }else{
                                    alert("加入购物车失败！！！！！！！！！");


                                }

                            },"text");


                        });



                    }
                });
            }
            requestGoodsByCondition();

        });
    </script>
    <script>
        $(function () {
            var uid=sessionStorage.getItem("userId");
            var conditionData = {
                "userId":uid//用户编号
            };
            var conditionDataJSON = JSON.stringify(conditionData);
            $.ajax({
                type: 'post',
                url: "/shoppingcart/getListBayIndex",    // 提交到controller的url路径
                data: conditionDataJSON,
                contentType: "application/json",
                cache: false,
                async: true,
                success: function (data) {    // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值;;
                    var jsonString = JSON.parse(data) ;
                    if (jsonString.msg == "ok") {
                        $(".grid_6 #cart_nav li .cart_cont").remove();
                        $(".grid_6 #cart_nav li a.cart_li span").html(jsonString.sum+"件");
                        var r =jsonString.shoppingcartList;
                        var html ='<ul class="cart_cont"><li class="no_border"><p>最近添加的项目</p></li><li>';
                        for (var i=0;i<r.length;i++){
                            html +='<li><a href="javaScript:void(0);"alt="' +
                                r[i].goods.gid+'" class="prev_cart getByGoodsId"><div class="cart_vert"><img src="' +
                                r[i].goods.gimage+'" alt="" title="" /></div></a><div class="cont_cart"><h4>' +
                                r[i].goods.gname+'</h4><div class="price">￥' +
                                r[i].goods.price+'</div> </div> <a title="close" class="close" href="#"></a><div class="clear"></div></li>';

                        }
                        html+='<li class="no_border"> <a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a><a href="/qd/checkout.html" class="checkout">进行结账</a></li></ul>';
                        $(".grid_6 #cart_nav li").append(html);
                        /*
                        * 商品详情*/
                        $(".getByGoodsId").click(function () {
                            var  gid =$(this).attr("alt");
                            window.location.href="/goods/getByIdGoods?id="+gid;
                        });
                    } else {
                        $(".grid_6 #cart_nav li .cart_cont").remove();
                        $('.grid_6 #cart_nav li .cart_li').click(function() {
                            alert("请登录！！！");

                        });
                    }
                },
            });
        })
    </script>

</head>
<body>
<div id="app">
    <div class="container_12">
        <div id="top">
            <div class="grid_3">
                <div class="phone_top">
                    Call Us +777 (100) 1234
                </div><!-- .phone_top -->
            </div><!-- .grid_3 -->

            <div class="grid_6">
                <div class="welcome">
                    <div v-if="!flag">欢迎访客，您可以<a href="/qd/login.html" style="color: #fe6400">登录</a> 或
                        <a href="/qd/register.html" style="color: #fe6400">创建帐户</a>.</div>
                    <div>
                        <p v-if="flag" class="uids" >{{userName}} 欢迎访问坭兴陶推荐网<a style="color: #fe6400;margin-left: 10px;cursor: pointer" @click="goOut">退出</a></p>
                    </div>
                    <input id="userIdPut" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.uid}">
                    <input id="userName" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.userName}">
                </div><!-- .welcome -->
            </div><!-- .grid_6 -->

            <div class="grid_3">
                <div class="valuta">
                    <ul>
                        <li class="curent"><a href="qd/customerService.html">客户服务</a></li>
                    </ul>
                </div><!-- .valuta -->

                <div class="lang">
                    <ul>
                        <li class="curent"><a href="/qd/personCenter.html">个人中心</a></li>
                        <li><a href="/qd/blog.html">关于我们</a></li>
                        <li><a href="/qd/contact_us.html">联系我们</a></li>
                    </ul>
                </div><!-- .lang -->
            </div><!-- .grid_3 -->
        </div><!-- #top -->

        <div class="clear"></div>

        <header id="branding">
            <div class="grid_3">
                <hgroup>
                    <h1 id="site_logo" ><a href="/goods/index.html" title=""><img src="/images/logo.png" alt="钦州坭兴陶" width="200" height="80"/></a></h1>
                    <h2 id="site_description">钦州坭兴陶</h2>
                </hgroup>
            </div><!-- .grid_3 -->

            <div class="grid_3">
                <form class="search">
                    <input type="text" name="search" class="entry_form" value="" placeholder="找你想要的..."/>
                </form>
            </div><!-- .grid_3 -->

            <div class="grid_6">
                <ul id="cart_nav">
                    <li>
                        <a class="cart_li" href="javaScript:void(0);">购物车<span>￥0.00</span></a>
                        <ul class="cart_cont">
                            <li class="no_border"><p>最近添加的项目</p></li>
                            <li class="no_border">
                                <a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a>
                                <a href="/qd/shopping_cart.html" class="checkout">进行结账</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <nav class="private">
                    <ul>
                        <li><a href="/qd/personCenter.html">我的账户</a></li>
                        <li class="separator">|</li>
                        <li><a href="javascript:ahref();">我的收藏</a></li>
                        <li class="separator">|</li>
                        <li><a href="/qd/orderInfo.html">我的订单</a></li>
                        <li class="separator" v-if="!flag">|</li>
                        <li v-if="!flag"><a href="/qd/login.html">登录</a></li>
                        <li class="separator">|</li>
                        <li v-if="!flag" ><a href="/qd/register.html">注册</a></li>
                    </ul>
                </nav><!-- .private -->
            </div><!-- .grid_6 -->
        </header><!-- #branding -->
    </div><!-- .container_12 -->

  <div class="clear"></div>

   <div id="block_nav_primary">
    <div class="container_12">
      <div class="grid_12">
        <nav class="primary">
          <ul>
            <li class=""><a href="/goods/index.html">首页</a></li>
              <li><a href="/qd/catalog_grid.html">全部宝贝</a></li>
            <li><a href="/qd/catalog_grid.html">热销推荐</a></li>
             <li class="curent"><a href="/qd/compare.html">猜你喜欢</a></li>
            <li>
              <a href="/qd/catalog_list.html">新品推荐</a>
            </li>

            
	    <li>
              <a href="#">更多精彩</a>
              <ul class="sub">
									<li><a href="contact_us.html">联系我们</a></li>
									<li><a href="blog.html">关于我们</a></li>
									
              </ul>
            </li>
          </ul>
        </nav><!-- .primary -->
      </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
  </div><!-- .block_nav_primary -->

  <div class="clear"></div>

  <section id="main" class="entire_width" style="margin-top: 20px;">
    <div class="container_12">
       <div class="grid_12" id="grid_12a">
       <h1 class="page_title">猜你喜欢</h1>

       <table class="compare">
	      <tr class="close_top">
		     <td class="desc"></td>
		     <td><a title="close" class="close" href="javaScript:void(0);"></a></td>
		     <td><a title="close" class="close" href="#"></a></td>
		     <td><a title="close" class="close" href="#"></a></td>
	      </tr>
	      <tr class="images">
		     <td class="desc">照片</td>
		     <td class="bg"><a href="product_page.html"><div><img src="/images/produkt_slid1.jpg" alt="Product slide 1"></div></a></td>
		     <td><a href="product_page.html"><div><img src="/images/product_1.jpg" alt="Product 6"></div></a></td>
		     <td class="bg"><a href="product_page.html"><div><img src="/images/product_2.jpg" alt="Product 2"></div></a></td>
	      </tr>
	      <tr class="prise">
		     <td class="desc">价格</td>
		     <td class="bg">￥550.00<div class="price_old">$725.00</div></td>
		     <td>￥550.00<div class="price_old">￥725.00</div></td>
		     <td class="bg">￥550.00<div class="price_old">￥725.00</div></td>
	      </tr>
	      <tr class="model">
		     <td class="desc">类型</td>
		     <td class="bg">猜你喜欢 商品</td>
		     <td> 广西钦州坭兴陶茶杯水杯 </td>
		     <td class="bg">马武宏老师纯手工刻绘品 <br/>茶具小茶杯小杯子</td>
	      </tr>
	     <!-- <tr class="brand">
		     
	      </tr>-->
	      <tr class="availbility">
		     <td class="desc">库存</td>
		     <td class="bg">有货</br>12335</td>
		     <td>有货</br>12335</td>
		     <td class="bg">有货</br>12335</td>
	      </tr>
	      <tr class="rating">
		     <td class="desc">评分</td>
		     <td class="bg">
			    <div class="quality">
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a href="#"></a>
				   <a href="#"></a>
			    </div>
		     </td>
		     <td>
			    <div class="quality">
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a href="#"></a>
				   <a href="#"></a>
			    </div>
		     </td>
		     <td class="bg">
			    <div class="quality">
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a class="plus" href="#"></a>
				   <a href="#"></a>
				   <a href="#"></a>
			    </div>
		     </td>
	      </tr>
	      <tr class="description">
		     <td class="desc">详情</td>
		     <td class="bg">
			    <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p><br/>
			    <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p>
		     </td>
		     <td>
			   <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p><br/>
			    <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p>
		     </td>
		     <td class="bg">
			     <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p><br/>
			    <p>此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯此时此刻 广西钦州坭兴陶茶杯水杯 马武宏老师纯手工刻绘品茗杯茶具小茶杯小杯子 高身收口杯</p>
	      </td>
	      </tr>
	      <tr class="add_cart">
		     <td class="desc"></td>
		     <td class="bg"><button class="add">加入购物车</button></td>
		     <td><button class="add">加入购物车</button></td>
		     <td class="bg"><button class="add">加入购物车</button></td>
	      </tr>
	      <tr class="close_botttom">
		     <td class="desc"></td>
		     <td><a title="close" class="close" href="#"></a></td>
		     <td><a title="close" class="close" href="#"></a></td>
		     <td><a title="close" class="close" href="#"></a></td>
	      </tr>
       </table>
       </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
  </section><!-- #main -->

  <div class="clear"></div>

<footer>
    <div class="f_navigation">
      <div class="container_12">
        <div class="grid_3">
          <h3>联系我们</h3>
          <ul class="f_contact">
            <li>钦州湾广场</li>
            <li>+777 (100) 1234</li>
            <li>mail@example.com</li>
          </ul><!-- .f_contact -->
        </div><!-- .grid_3 -->

        <div class="grid_3">
          <h3>信息</h3>
          <nav class="f_menu">
            <ul>
              <li><a href="#">关于我们</a></li>
              <li><a href="#">隐私政策</a></li>
              <li><a href="#">条款及细则</a></li>
              <li><a href="#">安全付款</a></li>
            </ul>
          </nav><!-- .private -->
        </div><!-- .grid_3 -->

        <div class="grid_3">
          <h3>顾客服务</h3>
          <nav class="f_menu">
            <ul>
              <li><a href="contact_us.html">联系方式</a></li>
              <li><a href="#">返回</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">网站地图</a></li>
            </ul>
          </nav><!-- .private -->
        </div><!-- .grid_3 -->
        <div class="clear"></div>
      </div><!-- .container_12 -->
    </div><!-- .f_navigation -->

    <div class="f_info">
      <div class="container_12" >
        <div class="grid_6" style="margin: 0 auto; width: 100%;">
          <p class="copyright" style="text-align: center;">© 钦州坭兴陶, 2020.07 </p>
        </div><!-- .grid_6 -->
        <div class="clear"></div>
      </div><!-- .container_12 -->
    </div><!-- .f_info -->
  </footer>
</div>
<script>
    function ahref() {
        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            window.location.href = "/qd/collection.html";
        }else {
            alert("请先登录！")
        }
    }
    function seeCart(){
        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            window.location.href = "/qd/shopping_cart.html";
        }else {
            alert("请先登录！")
        }
    }
    $(function() {
        var userId = $("#userIdPut").val();
        if (userId != null && userId != ""){
            sessionStorage.setItem("userId",userId);
            sessionStorage.setItem("userName",$("#userName").val());
        }

    });

    let vue = new Vue({
        el: '#app',
        data() {
            return {
                flag:false,
                userName:""
            }
        },
        methods:{
            getUserInfo(){
                let userId = sessionStorage.getItem("userId");
                if (userId != null && userId != ""){
                    this.flag=true
                    this.userName=sessionStorage.getItem("userName")
                }
            },
            goOut(){
                sessionStorage.removeItem("userId")
                sessionStorage.removeItem("userName")
                window.location.href="/goods/index.html"
            }
        },
        created(){
            this.getUserInfo()
        }
    })
</script>

</body>
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
</html>
